<script setup lang="ts">
const { content, direction } = defineProps<{
  content: string
  direction: 'left' | 'right'
}>()
</script>

<template>
  <div
    class="flex text-white mt-7"
    :class="{ 'flex-row': direction === 'left', 'flex-row-reverse': direction === 'right' }"
  >
    <div
      class="flex items-center justify-center pl-6 pr-6 pt-5 pb-5 bg-primary rounded-3xl opacity-70 max-w-3xl"
      :class="{
        'rounded-bl-none': direction === 'left',
        'rounded-br-none': direction === 'right'
      }"
    >
      <span class="opacity-100 text-2xl leading-loose">
        {{ content }}
      </span>
    </div>
  </div>
</template>

<style scoped></style>
